<template>
<form action="" class="validate-form-container">
<slot name="default"></slot>
<div class="submit-area"  @click.prevent="submitForm">
<slot name="submit">
    <button type="submit" class="btn btn-primary">提交</button> 
</slot>
</div>
</form>
</template>

<script lang="ts">
import { defineComponent,onUnmounted} from "vue";
import  mitt from "mitt" ; //他就是用来监听你的事件，确认你的事件有没有传入，如果传入了会用自己的方式把事件拿到
import { enumDefaultedMember } from "@babel/types";
// type Events ={
//     "form-item-created":string;
// };

// export const emitter = mitt<Events>();
type ValidateFunc=()=>boolean;
export const emitter = mitt();
// 他用on的方式发送一个事件 然后去执行回调 
export default defineComponent({
    // 需要 发送的事件名称
    emits: ["form-submit"],
    setup(props,context){
        let  FuncArr : ValidateFunc[]=[];  //声明一个空数组
        const submitForm =()=>{
            //按钮点击事件，我们要去验证
            // 循环执行数组得到最后的验证结果
            const result = funcArr.map((func)=>func()).every((result)=>result);
            context.emit("form-submit",result);
            };
// 将监听得到的验证函数都存到一个数组 
const callback=(func?:ValidateFunc)=>{
    console.log(func);
    if(func){
        //如果这个函数存在
        funcArr.push(func);
    }
};
emitter.on("form-item-created",callback);
onUnmounted(()=>{
    emitter.off("form-item-created",callback);
    funcArr = [];
});
return{
    submitForm,
};

    },
});
</script>
 
<style scoped></style> 